<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02表单渲染</title>
  <script src="js/vue(1).js"></script>
</head>
<body>
<div id="div">
  {{username}}------{{remark}}-----{{sex}}----{{hobby}}<br/>
  <input type="button"   @click="changeSex()"  value="点击">
  用户名：<input type="text" v-model="username"><br/>
  备注：<textarea v-model="remark"></textarea><br/>
  性别：<input type="radio" v-model="sex" value="f">:女
  <input type="radio" v-model="sex" value="m">:男<br/>
  爱好:<input type="checkbox" v-model="hobby" value="eat">:吃
  <input type="checkbox" v-model="hobby" value="drink">:喝
  <input type="checkbox" v-model="hobby" value="play">:玩
  <input type="checkbox" v-model="hobby" value="happy">:乐<br/>
  学校:
  <select v-model="school" multiple>
    <option value="1">太原工业学院</option>
    <option value="2">中北大学</option>
    <option value="3">太原科技大学</option>
  </select>
</div>
<script>
  var vm=new Vue({
    el:"#div",
    data:{
      username:"",
      remark:"备注",
      sex:"m",
      hobby:["eat,play"],
      school:[2,3]
    },
    methods:{
      changeSex:function(){
        //this表示的是vue的对象 vm
        if(this.sex=="m"){
          this.sex="f"
        }
        else {
          this.sex="m"
        }
      }
    }
  })
</script>
</body>
</html>